<template>
    <!-- <nav>顶部栏</nav> -->
    <AppTopnav></AppTopnav>

    <!-- <header>头部</header> -->
    <App-header></App-header>
        <!-- 吸顶栏 -->
    <app-header-sticky class="opctiy" :class="{'show':y>=78}" ></app-header-sticky>
    <div class="body">
        <!-- 主体 -->
        <router-view></router-view>
    </div>
    <!-- <footer>
        底部
    </footer> -->
    <Appfooter></Appfooter>
</template>
<script>
// import { ref } from 'vue'
// 引入一堆东西
import { useWindowScroll } from '@vueuse/core'
import AppTopnav from '@/components/app-topnav.vue'
import AppHeader from '@/components/app-header.vue'
import Appfooter from '@/components/app-footer.vue'
import { useStore } from 'vuex'
import AppHeaderSticky from '@/components/app-header-sticky.vue'
export default {
  components: {
    AppTopnav,
    AppHeader,
    Appfooter,
    AppHeaderSticky
  },
  setup () {
    const store = useStore()
    // 执行vuex的actions获取分类列表
    store.dispatch('category/setcategory')
    // const y = ref(0)
    // window.addEventListener('scroll', () => {
    //   y.value = document.documentElement.scrollTop
    // })
    const { y } = useWindowScroll()
    return { y }
  }
}
</script>
<style lang="less" scoped>
.body{
  min-height: 1000px;
}
.opctiy{
  opacity: 0;
  transform: translateY(-100%);
  transition: all .5s;
  &.show{
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
